import styles from './index.css';
import ContainerList from './components/ContainerList';
import CreateDrawer from './components/CreateDrawer';
import { Button, Dropdown, Menu, Icon, Tag } from 'antd';

import { connect } from 'dva';
import React from 'react';
import { tools } from 'utils';


const Container = ({ container, dispatch, image, network }) => {
  const menu = (
    <Menu onClick={(item) => {
      dispatch({ type: 'docker/container/' + item.key, payload: { container: container.selectKeys } });
    }}>
      <Menu.Item key="reStart">
        <Icon type="reload"/>
        ReStart
      </Menu.Item>
      <Menu.Item key="stop">
        <Icon type="pause"/>
        Stop
      </Menu.Item>
      <Menu.Item key="start">
        <Icon type="play-circle"/>
        Start
      </Menu.Item>
      <Menu.Item key="remove">
        <Icon type="delete"/>
        Delete
      </Menu.Item>
    </Menu>
  );
  const containerProps = {
    container: container,
    rowSelection: {
      onChange: (selectedRowKeys, selectedRows) => {
        //选中项 同步到 model
        dispatch({ type: 'docker/container/selectKeys', payload: { selectedRowKeys } });
      },
      selectedRowKeys: container.selectKeys,
    },
    getTagColor: (status) => {
      // 获取状态颜色
      let colors = null;
      switch (status) {
        case 'running':
          colors = '#87d068';
          break;
        case 'exited':
          colors = '#f50';
          break;
        case 'created':
          colors = 'green';
          break;
      }
      return colors;
    },
    getPortList: (data) => {
      // 获取port list
      let portList = [];
      for (let value in data) {
        let list = [];
        for (let keys in data[value]) {
          list.push(data[value][keys]['HostPort']);
        }
        portList.push(list);
      }
      return portList.map(function(value, index, array) {
        if (value.toString()) {
          // 不存在端口 不显示port标签
          return <Tag key={index} color={tools.rangeColor()}>{value}</Tag>;
        }
      });
    },

  };
  const createDrawerProps = {
    container: container,
    closeDrawer: () => {
      // 关闭创建container页面
      dispatch({ type: 'docker/container/updateState', payload: { visibleCreate: false } });
    },
    createGroupPort: () => {
      // 创建一组新的port端口
      let tmp = container.formPortList;
      tmp.push(container.formPortList.length);
      dispatch({ type: 'docker/container/updateState', payload: { formPortList: tmp } });
    },
    deleteGroupPort: (keys) => {
      // 删除一组端口
      let tmp = container.formPortList;
      delete tmp[keys];
      dispatch({ type: 'docker/container/updateState', payload: { formPortList: tmp } });
    },
    image: image.image,
    submitForm: (formData) => {
      // container 创建form提交
      dispatch({ type: 'docker/container/createSubmit', payload: { formData } });
    },
    network,
    environmentProps: {
      container,
      createGroupEnv: () => {
        let envList = container.envList;
        envList.push(container.envList.length);
        dispatch({ type: 'docker/container/updateState', payload: { envList: envList } });
      },
      deleteGroupEnv: (keys) => {
        // 删除一组端口
        let tmp = container.envList;
        delete tmp[keys];
        dispatch({ type: 'docker/container/updateState', payload: { envList: tmp } });
      }
    },
  };
  const triggerDrawer = () => {
    if (container.visibleCreate === false) {
      dispatch({ type: 'docker/image/query' });
      dispatch({ type: 'docker/network/query' });

    }
    dispatch({ type: 'docker/container/updateState', payload: { visibleCreate: !container.visibleCreate } });
  };
  return (
    <div>
      <h2>Container</h2>
      <div>
        <Dropdown overlay={menu} trigger={['click']}>
          <Button size="large" type="primary" loading={container.tableLoading}>
            {container.tableLoading ? '' : <Icon type="bars"/>} Action
          </Button>
        </Dropdown>
        <Button size="large" style={{ marginLeft: 15 }} disabled={container.tableLoading} onClick={triggerDrawer}>
          <Icon type="plus"/>
          Create
        </Button>
      </div>
      <p></p>
      <ContainerList {...containerProps} />
      <CreateDrawer {...createDrawerProps} />
    </div>
  );
};
export default connect((_) => ({
  container: _['docker/container'],
  image: _['docker/image'],
  network: _['docker/network'],
}))(Container);

